<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/css/layui.css">
</head>
<body>

<!-- 你的HTML代码 -->

<script src="/layui.js"></script>
<script type="text/html" id="barDemo">
    <div class="layui-btn-container">
<!--        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>-->
        <button class="layui-btn layui-btn-sm" lay-event="delete">付款</button>
<!--        <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>-->
    </div>
</script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form','table'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
         table = layui.table;
        var reloadTab = function(){
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 312
                ,url: '/listAll'
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'state', title: '状态', width:80}
                    ,{ title: '操作', width:200,toolbar: '#barDemo'}
                ]]
            });

            //第一个实例
            table.render({
                elem: '#timeout'
                ,height: 312
                ,url: '/timeout'
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                    ,{field: 'state', title: '状态', width:80}
                ]]
            });
        }
        reloadTab();


        $('#create').on('click', function () {
            $.ajax({
                url: "/rabbit/test",
                type: "get",
                dataType: "json",
                headers: {'Content-Type': 'application/json;charset=utf-8'}, //接口json格式
                success: function (data) {
                    reloadTab();
                    layer.alert(JSON.stringify(data), {
                        title: data
                    });
                },
                error: function (data) {
                    layer.alert(JSON.stringify(data), {
                        title: data
                    });
                }
            });
        })

        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if(layEvent === 'delete'){ //查看
              // console.log(obj.data.id)
                $.ajax({
                    url: "/pay?id="+obj.data.id,
                    type: "get",
                    success: function (data) {
                        //刷新待付款和超时
                       reloadTab();
                       if((data.code)==0){
                           layer.alert(data.msg, {icon: 0});
                       }else if(data.code==2){
                           layer.alert(data.msg,{icon:1});
                       }else {
                           layer.alert(data.msg,{icon:2});
                       }
                    },
                    error: function (data) {
                        layer.alert(JSON.stringify(data), {
                            title: data
                        });
                    }
                });
            }
        });

    });

</script>
<button type="button" class="layui-btn layui-btn-radius" id="create">生成订单</button>
<br>
<button type="button" class="layui-btn layui-btn-radius" id="pay">待付款订单</button>
<br>
<table id="demo" lay-filter="test"></table>
<br>
<button type="button" class="layui-btn layui-btn-radius" id="query">超时订单</button>
<a id="timeout"></a>
</body>
</html>